<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="header-container">
            <div class="logo">
                L O G O
            </div>
            <div class="icon">
                <div class="icon-item iconfont icon-shezhi"></div>
                <div class="icon-item iconfont icon-xiangling"></div>
                <div class="log-out">Log Out</div>
            </div>
        </div>
    </header>
    <!-- 中间内容区 -->
    <div class="center-container">
        <!-- 中间的内容上面一部分 -->
        <div class="center-top">
            <div class="text-left">
                <div class="text-title">
                    Audience Overview
                </div>
                <p>
                    Roseville.CA
                </p>
            </div>
            <!-- 导航条部分 -->
            <ul class="text-ul active">
                <li>DASHBOARD</li>
                <li>PROJECTS</li>
                <li>CALENDAR</li>
                <li>MAILBOX</li>
                <li>SETTINGS</li>
            </ul>
        </div>
        <!-- 轮播图 一栏 -->
        <div class="carousel-container">
            <!-- 轮播图 -->
            <div class="carousel" >
                <div>
                     <ul style="transform: translateX(0px);">
                        <li>
                           <img src="./images/1.jpeg">
                        </li>
                        <li >
                           <img src="./images/2.jpeg">
                        </li>
                        <li >
                           <img src="./images/3.jpeg">
                        </li>
                        <li >
                            <img src="./images/4.jpeg">
                         </li>
                         <li >
                            <img src="./images/5.jpeg">
                         </li>
                     </ul>
                     <div class="point">
                        <div class="active"></div>
                        <div></div>
                        <div ></div>
                        <div></div>
                        <div></div>
                     </div>
                </div>
               
                <span class="click-button">></span>
                <span class="click-button"><</span>
            </div> 
            <!-- 右边的文字部分 -->
            <div class="grid-container">
                 <div class="text">
                    <div>Support Requests</div>
                     <div>View All</div>
                </div>
                <div class="gird-data">
                    <div class="gird-item">TIME</div>
                     <div class="gird-item">USER NAME</div>
                    <div class="gird-item">STATUS</div>
                    <div class="gird-item time-emial">9:45pm</div>
                    <div class="gird-item time-emial">info@design.com</div>
                    <div class="gird-item">Solved</div>
                    <div class="gird-item time-emial">9:45pm</div>
                    <div class="gird-item time-emial">info@design.com</div>
                    <div class="gird-item">Solved</div>
                </div>

            </div>
        </div>

        <!-- 折线图一栏 -->
        <div class="lineChart"> </div>

        <div class="chart-container">
            <!-- 饼状图 -->
            <div class="circular"></div>
            <!-- 柱状图 -->
            <div class="column"></div>
        </div>
    </div>
    <div class="hidden"></div>
    <div class="hidden"></div>

    <!-- 页脚部分 -->
    <footer>
        <div>
            <div class="footer-logo">
                LOGO
            </div>
            <ul class="footer-list1">
                <li>NEWS</li>
                <li>SPORT</li>
                <li>WEATHER</li>
                <li>FUTURE</li>
                <li>TRAVEL</li>
                <li>CHANNELS</li>
                <a href="#"><li>CULTURE</li></a> 
                <li>AUTOS</li>
                <li>FOOD</li>
                <li>RADIO</li>
            </ul>
            <ul class="footer-list2">
                <li>OVERVIEW</li>
                <li>NATURE</li>
                <li>LOACAL</li>
                <li>EARTH</li>
                <li>TIMELINE</li>
                <li>MUSIC</li>
                <li>SHOP</li>
                <li>TV</li>
            </ul>
        </div>

    </footer>
    <script src="./js/request.js"></script>
    <script src="./js/crousel.js"></script>
    <script src="./js/table.js"></script>
</body>

</html>